{currentData.title}

성경 본문: {currentData.bibleRef}

{currentData.bibleText}

)} {activeTab === 'sermon' && (

설교 전문

{currentData.sermon}

)} {activeTab === 'hymn' && (

{currentData.hymnUrl ? ( Hymn Sheet

) : (

악보 준비 중

)}

)} {activeTab === 'sharing' && (

Worship Sharing

Q. {currentData.sharingTopic}

{prayers.length === 0 ?

아직 나눔이 없습니다.
첫 번째 은혜를 나누어 주세요.

: prayers.map((post) => (

{post.author}{post.timestamp ? new Date(post.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''}

{post.text}

))}

setUnitName(e.target.value)} disabled={isAnonymous} placeholder={isAnonymous ? "익명 상태" : "부대명"} className="w-1/2 bg-gray-50 border border-gray-100 rounded-xl px-4 py-2 text-xs focus:ring-1 focus:ring-indigo-500" /> setUserName(e.target.value)} disabled={isAnonymous} placeholder={isAnonymous ? "익명 상태" : "이름"} className="w-1/2 bg-gray-50 border border-gray-100 rounded-xl px-4 py-2 text-xs focus:ring-1 focus:ring-indigo-500" />

setIsAnonymous(e.target.checked)} className="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />익명

setNewPrayer(e.target.value)} placeholder="질문에 대한 답이나 은혜를 나누어 주세요..." className="flex-1 bg-gray-50 border border-gray-100 rounded-2xl px-5 py-3 text-sm focus:ring-1 focus:ring-indigo-500 resize-none" />
                <button onClick={handlePostPrayer} disabled={!newPrayer.trim()} className="bg-indigo-600 text-white p-4 rounded-2xl disabled:opacity-50 hover:bg-indigo-700 active:scale-95 self-end"><Send size={20} /></button>
              </div>
            </div>
          </div>
        )}

{activeTab === 'church' && (
          <div className="flex flex-col min-h-full bg-white">
            <div className="p-6 flex-1 space-y-10 bg-white">
              <div className="flex flex-col items-center text-center space-y-4 pt-4">
                <img src="https://lh3.googleusercontent.com/d/1Vao6FoIS1_LYe7fT-BXYYYOxz3h6JEcY" alt="Church Logo" className="w-24 h-24 object-contain mb-2 shadow-sm rounded-full bg-slate-50 p-1" referrerPolicy="no-referrer" />
                <h2 className="text-2xl font-black text-slate-800 tracking-tighter">해군해병대교회</h2>
                <p className="text-xs text-slate-500 font-medium leading-relaxed bg-slate-50 px-4 py-2 rounded-full border border-slate-100">바다 위에서도, 땅 끝에서도 하나님과 함께하는 승리의 공동체</p>
              </div>
              <div className="space-y-10">
                <div className="space-y-4">
                  <div className="flex items-center gap-2 border-l-4 border-indigo-600 pl-3"><h3 className="text-lg font-black text-slate-800">2026 해군교회 예배 안내</h3><span className="bg-indigo-50 text-indigo-600 text-[10px] font-bold px-2 py-0.5 rounded uppercase">Navy</span></div>
                  <div className="overflow-x-auto rounded-2xl border border-slate-100 shadow-sm">
                    <table className="w-full text-left border-collapse text-[11px]">
                      <thead><tr className="bg-slate-900 text-white"><th className="p-3 font-bold whitespace-nowrap"><MapPin size={12} className="inline mr-1" />교회명</th><th className="p-3 font-bold whitespace-nowrap"><User size={12} className="inline mr-1" />목사</th><th className="p-3 font-bold whitespace-nowrap"><Clock size={12} className="inline mr-1" />예배시간</th><th className="p-3 font-bold whitespace-nowrap"><Car size={12} className="inline mr-1" />배차</th></tr></thead>
                      <tbody className="divide-y divide-slate-50">{NAVY_CHURCHES.map((church, idx) => (<tr key={idx} className={idx % 2 === 0 ? "bg-white" : "bg-slate-50/50"}><td className="p-3 font-bold text-slate-800 whitespace-nowrap">{church.name}</td><td className="p-3 text-slate-600 whitespace-nowrap">{church.pastor}</td><td className="p-3 text-slate-600 whitespace-pre-line leading-relaxed">{church.time}</td><td className={`p-3 font-bold whitespace-nowrap ${church.shuttle.startsWith('O') ? 'text-indigo-600' : 'text-slate-400'}`}>{church.shuttle}</td></tr>))}</tbody>
                    </table>
                  </div>
                </div>
                <div className="space-y-4">
                  <div className="flex items-center gap-2 border-l-4 border-red-600 pl-3"><h3 className="text-lg font-black text-slate-800">2026 해병대교회 예배 안내</h3><span className="bg-red-50 text-red-600 text-[10px] font-bold px-2 py-0.5 rounded uppercase">Marine</span></div>
                  <div className="overflow-x-auto rounded-2xl border border-red-50 shadow-sm">
                    <table className="w-full text-left border-collapse text-[11px]">
                      <thead><tr className="bg-red-700 text-white"><th className="p-3 font-bold whitespace-nowrap"><MapPin size={12} className="inline mr-1" />교회명</th><th className="p-3 font-bold whitespace-nowrap"><User size={12} className="inline mr-1" />목사</th><th className="p-3 font-bold whitespace-nowrap"><Clock size={12} className="inline mr-1" />예배시간</th><th className="p-3 font-bold whitespace-nowrap"><Car size={12} className="inline mr-1" />배차</th></tr></thead>
                      <tbody className="divide-y divide-red-50">{MARINE_CHURCHES.map((church, idx) => (<tr key={idx} className={idx % 2 === 0 ? "bg-white" : "bg-red-50/20"}><td className="p-3 font-bold text-slate-800 whitespace-nowrap">{church.name}</td><td className="p-3 text-slate-600 whitespace-nowrap">{church.pastor}</td><td className="p-3 text-slate-600 whitespace-pre-line leading-relaxed">{church.time}</td><td className={`p-3 font-bold whitespace-nowrap ${church.shuttle.includes('O') ? 'text-red-600' : 'text-slate-400'}`}>{church.shuttle}</td></tr>))}</tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <CopyrightFooter />
          </div>
        )}
      </main>

{/* --- Menu Overlay --- */}
      <div className={`fixed inset-0 bg-black/60 z-[60] transition-opacity duration-300 ${isMenuOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        <div className={`absolute right-0 top-0 bottom-0 w-72 bg-white shadow-2xl transform transition-transform duration-300 flex flex-col ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
          <div className="p-5 border-b flex justify-between items-center bg-gray-50">
            <h2 className="font-bold text-gray-800 flex items-center gap-2"><FileText size={18} className="text-indigo-600" /> 주차 선택</h2>
            <button onClick={() => setIsMenuOpen(false)} className="text-gray-400 p-1"><X size={24} /></button>
          </div>
          <div className="flex-1 overflow-y-auto p-3 space-y-1">
            {WEEKS.map((w) => (
              <button
                key={w.id}
                onClick={() => { setCurrentWeek(w.id); setIsMenuOpen(false); setActiveTab('bible'); }}
                className={`w-full text-left p-3 rounded-xl text-sm transition-all flex justify-between items-center ${currentWeek === w.id ? 'bg-indigo-600 text-white shadow-md' : 'hover:bg-gray-100 text-gray-700'}`}
              >
                <span>{w.label}</span>
                {WORSHIP_DATA[w.id] && <span className={`w-2 h-2 rounded-full ${currentWeek === w.id ? 'bg-white' : 'bg-indigo-400 animate-pulse'}`}></span>}
              </button>
            ))}
          </div>
        </div>
      </div>

export default App;

모바일 함정격오지예배

모바일 함정격오지예배

{currentData.title}

성경 본문: {currentData.bibleRef}

설교 전문

Q. {currentData.sharingTopic}